<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // 传统的异步解决方式
    // 1. 借助回调函数  => 啥时候有结果 =>执行回调函数  (setInterval/setTimeout)
    // 2. 借助事件解决  => 等待状态改变之后 触发监听事件 (ajax)

    // 异步任务
    // setInterval/setTimeout  ajax 事件

    // console.log("代码开始执行");
    // console.time("aaa");
    // console.time("bbb");

    // for (var i = 0; i < 4; i++) {
    //     setTimeout(function () {
    //         console.log(i);
    //         console.timeLog("bbb");
    //     }, 5000);
    //     console.timeLog("aaa");
    // }
    // console.timeEnd("aaa");
    // console.log("代码开始完毕", i); // 4


    // 会先将setTimeout放入任务队列中，主线程所有同步任务执行完毕，任务队列通知主线程，某个异步任务可以执行任务了，该任务才会进入主线程执行。
    /* console.log(1111111111);
    setTimeout(function () {
        console.log(222222222222);
    }, 0)
    console.log(3333333333); */



    console.log("代码开始执行")
    var req = new XMLHttpRequest();  // 0

    req.open("get", "../day44/pro.json", true);  // 1

    req.send();  // 1
    console.log(req.readyState);

    req.onreadystatechange = function () {
        console.log("readyState", req.readyState);  // 2 3 4
        if (req.readyState == 4 && req.status == 200) {
            // console.log(req.responseText);

            // 后端返回的响应数据 可以是 txt/html/xml/json数据(json字符串)
            // var result = req.responseText;
            // demo.innerHTML = result;
        }
    }
    console.log("代码开始结束")
</script>
</html>